<template>
  <div id='app'>
            <van-nav-bar
  title="商品"
  left-text="返回"
    left-arrow
  @click-left="onClickLeft"

/>

<van-swipe :autoplay="3000" class="swipe-tow">
  <van-swipe-item v-for="(image, index) in gallery" :key="index">
    <img v-lazy="image.img_url" />
  </van-swipe-item>
</van-swipe>
<div class="foot">
    <p>{{info.name}}</p>
    <p>{{info.goods_brief}}</p>
    <p v-show="!show">￥{{info.retail_price}}</p>
</div>
<van-loading color="#0094ff" v-show="show" class="ll"/>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [],
      gallery:[],
      info:[],
      show:true
    }
  },
  methods: {
onClickLeft(){
    this.$router.go(-1)
},
get(){
    this.$axios(`http://shop.bufantec.com/bufan/goods/detailaction?openId=13216484256&id=${this.$route.query.d}`,'get').then(res=>{
        console.log(res.data.info);
        this.gallery=res.data.gallery
        this.info=res.data.info
        this.show=false

    })

}
  },
  mounted() {
this.get()
  },
  components: {

  }
}
</script>

<style lang='scss'>
.swipe-tow{
    img{
        width: 100%;
        height: auto;
    }
}
.foot{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    p:nth-child(1){
        margin: 10px 0;
        font-weight: 900;
        font-size: 24px;
    }
    p:nth-child(2){
        margin: 20px 0;
        font-size: 14px;
        color: grey;


    }
    p:nth-child(3){
        color: red;
        font-size: 16px;
    }

}
.ll{
    position: fixed;
  left: 50%;
  top: 50%;
  transition: -50% -50%;
}

</style>
